<%--
  Created by IntelliJ IDEA.
  User: 86173
  Date: 2021/11/22
  Time: 8:14
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>Title</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${APP_PATH}/static/dist/sidebar-menu.css">
    <link rel="stylesheet" href="${APP_PATH}/static/dist/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css">

    <script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
    <script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

    <style type="text/css">
        #admin_info{
            position: relative;
        }
        #admin_info>li>div{
            position: absolute;
            float: right;
            top: 0px;
            height: 60px;
            left: 230px;
            width: 1306px;
            /*border: 1px solid red;*/
            background-color: #1a2226;

        }
        #admin_info>li>div>ol{
            float: right;
            margin:5px 170px;
            list-style: none;
            display: inline-block !important;
            z-index: 10;
        }
        #admin_info>li>div>ol>li{
            display: inline-block;
        }
        .main-sidebar{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            min-height: 100%;
            width: 230px;
            z-index: 810;
            background-color: #222d32;
        }
        .sidebar-menu{
            position: relative;
        }
        .treeview li>div{
            position: absolute;
            top: 30px;
            left: 370px;
            /*width: 900px;*/
            /*height: 400px;*/
            display: none;
        }
        .treeview li>div .div_scroll{
            width: 900px;
            height: 400px;
            overflow: hidden;
            overflow-y: scroll;
        }
        .table{
            margin-bottom: 0px;
        }
        /*tr>td{*/
        /*    padding: 8px 0px !important;*/
        /*}*/
        .table > thead > tr > th {
            /*vertical-align: bottom;*/
             border-bottom: 0px solid #ddd;
        }
        /*添加用户的样式*/
        div>form>div{

            margin: 8px 0;
        }


        #sp{
            position: absolute;
        }
        #sp span{
            position: relative;
            left: 20px;
            top: 0px;
            border: 1px solid red;
            display: inline-block;
            width: 25px;
            height: 25px;
        }
    </style>
    <script>
        $(function (){
            $(".treeview li>a").click(function (){
                // let div = $(this).parent().find("div");

                $(this).parent().parent().children("li").find("div").hide();
                $(this).parent().find("div").show();
            })
        })
    </script>
</head>
<body>
<div class="container">
    <!-- 修改用户功能     模态框 -->
    <div class="modal fade" id="update_user_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalUpdate">用户修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="update_user_id" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <input type="hidden" name="userid" class="form-control" id="update_user_id">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_user_name" class="col-sm-2 control-label">用户姓名</label>
                            <div class="col-sm-10">
<%--                                <p id="update_user_name" class="form-control-static"></p>--%>
                                <input type="text" name="username" class="form-control" id="update_user_name">

                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_user_password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="text" name="userpassword" class="form-control" id="update_user_password">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">

                            <label for="update_user_gender" class="col-sm-2 control-label">性别<input type="hidden" id="update_user_gender"/></label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="update_user_gender1" value="男" checked> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="update_user_gender2" value="女" checked> 女

                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_user_phone" class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-10">
                                <input type="number" name="phone" class="form-control" id="update_user_phone">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_user_email" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="email" name="email" class="form-control" id="update_user_email" placeholder="xxxx@xxx.com">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <input type="hidden" name="userstate" class="form-control" id="update_user_userstate">

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="user_update">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改歌曲功能     模态框 -->
    <div class="modal fade" id="update_music_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">歌曲修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="update_user_id" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <input type="hidden" name="musicid" class="form-control" id="update_music_id">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_music_song" class="col-sm-2 control-label">歌曲</label>
                            <div class="col-sm-10">
                                <%--                                <p id="update_user_name" class="form-control-static"></p>--%>
                                <input type="text" name="song" class="form-control" id="update_music_song">

                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_music_singer" class="col-sm-2 control-label">歌手</label>
                            <div class="col-sm-10">
                                <input type="text" name="singer" class="form-control" id="update_music_singer">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_music_composer" class="col-sm-2 control-label">作曲家</label>
                            <div class="col-sm-10">
                                <input type="text" name="composer" class="form-control" id="update_music_composer">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_music_kind" class="col-sm-2 control-label">类别</label>
                            <div class="col-sm-10">
                                <select id="update_music_kind" class="form-control" name="kind">
                                    <option value="1">流行类</option>
                                    <option value="2">复古类</option>
                                    <option value="3">经典类</option>
                                </select>
<%--                                <input type="text" name="kind" class="form-control" id="update_music_kind">--%>
<%--                                <span class="help-block"></span>--%>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_music_hits" class="col-sm-2 control-label">点击量</label>
                            <div class="col-sm-10">
                                <input type="number" name="hits" class="form-control" id="update_music_hits">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_music_musicvip" class="col-sm-2 control-label">是否收费<input type="hidden" id="update_music_musicvip"/></label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="musicvip" id="update_music_musicvip1" value="0" checked> 否
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="musicvip" id="update_music_musicvip2" value="1" checked> 是
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_music_musiclike" class="col-sm-2 control-label">喜爱程度</label>
                            <div class="col-sm-10">
                                <p id="update_music_musiclike" class="form-control-static"></p>

                                <input type="hidden" name="musiclike" class="form-control" id="update_music_musiclike1">
                                <span class="help-block"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="music_update">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!--删除歌曲功能 模态框（Modal） -->
    <div class="modal fade" id="delete_music_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        删除功能
                    </h4>
                </div>
                <div class="modal-body">
                    你确定要删除歌曲【<span id="delete_music_info"></span>】吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-primary" id="is_delete_music">
                        删除
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--删除用户功能 模态框（Modal） -->
    <div class="modal fade" id="delete_user_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        删除功能
                    </h4>
                </div>
                <div class="modal-body">
                    你确定要删除用户【<span id="delete_admin_info"></span>】吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-primary" id="is_delete_user">
                        删除
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <aside class="main-sidebar">
        <section  class="sidebar">
            <ul class="sidebar-menu" id="admin_info">
                <li class="header">后台管理系统
                <div>
                    <ol style="display: block">
                        <li>用户:${admin.get(0).adminname}</li>
                        <li>
                            <button type="button" class="btn btn-warning" id="exit">注销</button>
                        </li>
                    </ol>
                </div>
                </li>
                <li class="treeview">
                    <a href="">
                        <i class="fa fa-address-card" aria-hidden="true"></i>
                        <span>用户管理</span> <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu ul_first">
                        <li>
                            <a href="#"><i class="fa fa-circle-o"></i> 修改信息</a>
                            <div class="table-responsive">
                                <div>
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th width="37px">id</th>
                                            <th width="61px">姓名</th>
                                            <th width="64px">密码</th>
                                            <th width="64px">性别</th>
                                            <th width="137px">电话</th>
                                            <th width="183px">邮箱</th>
                                            <th width="100px">会员</th>
                                            <th width="182px">操作</th>
                                        </tr>
                                        </thead>

                                    </table>
                                </div>
                                <div class="div_scroll">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th width="37px"></th>
                                            <th width="61px"></th>
                                            <th width="64px"></th>
                                            <th width="64px"></th>
                                            <th width="137px"></th>
                                            <th width="183px"></th>
                                            <th width="100px"></th>
                                            <th width="182px"></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-circle-o"></i> 新建用户</a>
                            <div style="padding: 0px 160px 10px;">
                                <form class="bs-example bs-example-form" role="form">
                                    <div class="input-group">
                                        <span class="input-group-addon">用户姓名</span>
                                        <input type="text" name="username" class="form-control" placeholder="请输入歌曲名">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
                                        <input type="password" name="userpassword" class="form-control" placeholder="请输入歌曲名">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="">性别</span>&nbsp;&nbsp;
                                        <label class="radio-inline">
                                            <input type="radio" name="gender" value="0" checked> 男
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="gender" value="1"> 女
                                        </label>
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
                                        <input type="text" name="phone" class="form-control" placeholder="请输入歌作曲家">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</span>
                                        <input type="email" name="email" class="form-control" placeholder="请输入歌作曲家">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="">级别</span>&nbsp;&nbsp;
                                        <label class="radio-inline">
                                            <input type="radio" name="userstate" value="1" checked> VIP用户
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="userstate" value="0"> 普通用户
                                        </label>
                                    </div>
                                    <input class="btn btn-default btn-lg" style="padding: 10px 20px;width: 120px;margin: 0 230px" type="submit" id="user_add" value="提交">
                                </form>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="">
                        <i class="fa fa-music" aria-hidden="true"></i>
                        <span>歌曲管理</span> <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu ul_second" style="display: none;">
                        <li>
                            <a href="#"><i class="fa fa-circle-o"></i> 修改歌曲</a>
                            <div class="table-responsive">
                                <div>
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th width="36.28px">id</th>
                                            <th width="116.4px">歌曲</th>
                                            <th width="121.4px">歌手</th>
                                            <th width="130.81px">作曲</th>
                                            <th width="68.7px">类别</th>
                                            <th width="43.53px">VIP</th>
                                            <th width="85.88px">喜爱程度</th>
                                            <th width="68.7px">点击量</th>
                                            <th width="146.51px">操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>

                                <div class="div_scroll">
                                    <table class="table">
<%--                                        <caption>所有用户</caption>--%>
                                        <thead>
                                        <tr>
                                            <th width="36.28px"></th>
                                            <th width="132.4px"></th>
                                            <th width="128.4px"></th>
                                            <th width="140.81px"></th>
                                            <th width="68.7px"></th>
                                            <th width="51.53px"></th>
                                            <th width="85.88px"></th>
                                            <th width="68.7px"></th>
                                            <th width="146.51px"></th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>


                                    </table>
                                </div>

                            </div>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-circle-o"></i> 添加歌曲</a>
                            <div style="padding: 0px 160px 10px;">
                                <form class="bs-example bs-example-form" role="form">
                                    <div class="input-group">
                                        <span class="input-group-addon">歌曲</span>
                                        <input type="text" name="song" class="form-control" placeholder="请输入歌曲名">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">歌手</span>
                                        <input type="text" name="singer" class="form-control" placeholder="请输入歌曲名">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">作曲</span>
                                        <input type="text" name="composer" class="form-control" placeholder="请输入歌作曲家">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">类别</span>
<%--                                        <input type="text" class="form-control" placeholder="请输入歌曲名">--%>
                                        <select class="form-control" name="kind">
                                            <option value="1">流行类</option>
                                            <option value="2">复古类</option>
                                            <option value="3">经典类</option>
                                        </select>
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="">是否收费</span>&nbsp;&nbsp;
<%--                                        <input type="text" class="form-control" placeholder="请输入歌曲名">--%>
<%--                                        <label for="update_music_musicvip" class="col-sm-2 control-label">是否收费<input type="hidden" id="update_music_musicvip"/></label>--%>
<%--                                        <div class="col-sm-10">--%>
                                            <label class="radio-inline">
                                                <input type="radio" name="musicvip" value="0" checked> 否
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="musicvip" value="1"> 是
                                            </label>
<%--                                        </div>--%>
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">点击量</span>
                                        <input type="number" name="hits" class="form-control" placeholder="请设置点击量">
                                    </div>
                                    <br>
                                    <input type="hidden" name="musiclike" class="form-control" placeholder="请设置点击量" value="0">

                                    <input class="btn btn-default btn-lg" style="padding: 10px 20px;width: 120px;margin: 0 230px" type="submit" id="music_add" value="提交">
                                </form>
                            </div>
                        </li>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
    </aside>
</div>

</body>

<script src="${APP_PATH}/static/dist/sidebar-menu.js"></script>
<script>

    $(function(){
        $.sidebarMenu($('.sidebar-menu'));

        //歌曲管理
        music();
        function music(){
            $.ajax({
                url:"${APP_PATH}/musicall",
                type:"get",
                success:function (result){
                    // console.log(result);
                    //在每次发送AJAX请求前，把上一次的数据情况
                    //如果切换太快，全部清除
                    $("#admin_info .ul_second tbody").empty();
                    //1、解析并显示员工数据
                    build_musics_table(result);
                }
            })
        }
        //1、显示歌曲信息表
        function build_musics_table(result){
            var musics = result.extend.musics;
            // console.log(result);
            $.each(musics,function (index,item){
                let musicid = $("<td></td>").append(item.musicid);
                let song = $("<td></td>").append(item.song);
                let singer = $("<td></td>").append(item.singer);
                let composer = $("<td></td>").append(item.composer);
                let kind = $("<td></td>").append(item.kind);
                if(kind.text() == 1){
                    kind.html("流行类");
                }else if(kind.text() == 2){
                    kind.html("复古类");
                }else{
                    kind.html("经典类");
                }
                let musicvip = $("<td></td>").append(item.musicvip);
                if(musicvip.text() == 1){
                    musicvip.html("");
                    musicvip.html("收费");
                }else {
                    musicvip.html("");
                    musicvip.html("免费");

                }
                let musiclike = $("<td></td>").append(item.musiclike);
                let hits = $("<td></td>").append(item.hits);
                let editBtn = $("<button></button>").attr("type","button").addClass("btn btn-success btn-sm update_music_btn").append($("<span></span>").attr("aria-hidden","true").addClass("glyphicon glyphicon-pencil")).append("编辑")
                //为editBtn添加一个自定义属性，来保存当前员工的id
                editBtn.attr("edit-id",item.musicid);
                let delBtn = $("<button></button>").attr("type","button").addClass("btn btn-danger btn-sm delete_music_btn").append($("<span></span>").attr("aria-hidden","true").addClass("glyphicon glyphicon-remove-sign")).append("删除")
                //为delBtn添加当前员工id
                delBtn.attr("del-id",item.musicid);
                let option = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                $("<tr/>").append(musicid).append(song).append(singer).append(composer).append(kind).append(musicvip).append(musiclike).append(hits).append(option).appendTo("#admin_info .ul_second tbody");
            })
        }
        //点击编辑按钮弹出模态框。
        //委派其父元素对其绑定单击事件，因为该事件是页面加载后绑定，
        $(document).on('click','.update_music_btn',function (){
            // console.log(this);
            //1、清除表单数据（表单完整重置（表单的数据，表单的样式））
            reset_form("#update_music_model form");
            // 2、查出员工信息，并显示
            let id = $(this).attr("edit-id");
            // alert(id);
            getMusic(id);
            $("#update_music_model").modal({
                backdrop:'static',
            })
        })
        // 2、查出员工信息，并显示
        function getMusic(musicid){
            $.ajax({
                url:"${APP_PATH}/musicone/"+musicid,
                type:"get",
                success:function (result){
                    // console.log(result);
                    let music = result.extend.music;
                    $("#update_music_id").attr("value",music.musicid);
                    $("#update_music_song").val(music.song);
                    $("#update_music_singer").val(music.singer);
                    $("#update_music_composer").val(music.composer);
                    $("#update_music_kind").val([music.kind]);
                    $("#update_music_hits").val(music.hits);
                    $("#update_music_musicvip input[name=musicvip]").val(music.musicvip).attr("disabled","disabled");
                    $("#update_music_musiclike").html(music.musiclike);
                    $("#update_music_musiclike1").val(music.musiclike);
                    //给提交按钮绑定该员工的id,之后根据id来修改
                    $("#music_update").attr("update_music_id",music.musicid);
                }
            })
        }
        //点击提交按钮，进行员工数据的更新
        $("#music_update").on('click',function (){
            let serialize = $("#update_music_model form").serialize();
            let component = decodeURIComponent(serialize);
            // alert(component);
            // +$("#update_user_id").val();
            // 可以不传id
            //2、发送AJAX请求修改信息
            $.ajax({
                url:"${APP_PATH}/music",
                type:"put",
                data:component,
                success:function (result){
                    if(result.code == 100){
                        //关闭更新模态框
                        alert("修改歌曲成功");
                        music();
                        $("#update_music_model").modal('hide');

                    }
                }
            })
        })
        //给删除按钮绑定点击事件   单个删除
        $(document).on('click',".delete_music_btn",function (){

            //1、清除提示框信息
            $("#delete_info").empty();
            // reset_form("#update_emp_model form");

            // 2、查出员工信息，并显示
            let id = $(this).attr("del-id");
            let song = $(this).parent().parent().find("td").eq(1).text();
            // console.log(empName);
            // alert(empName);
            $("#delete_music_info").append(song);
            //3、弹出提示框 提示是否删除
            $("#delete_music_model").modal({
                backdrop:'static',
            })
            alert(id);
            //4点击删除后，发送发AJAX请求删除
            $("#is_delete_music").on('click',function (){
                $.ajax({
                    url:"${APP_PATH}/music/"+id,
                    type:"delete",
                    success:function (result){
                        // console.log(result);
                        if(result.code == 100){
                            //关闭更新模态框
                            $("#delete_music_model").modal('hide');
                            //取消单击事件
                            $(this).off('click');
                            music();
                        }
                    }
                })

            })
        })
        //添加新歌曲
        $("#music_add").on('click',function (){
            let serialize = $(this).parent().serialize();
            let component = decodeURIComponent(serialize);
            // alert(component);
            $.ajax({
                url:"${APP_PATH}/musicadd",
                type:"post",
                data:component,
                success:function (result){
                    // console.log(result);
                    if(result.code == 100){
                        alert("添加成功");
                        user();
                    }else {
                        alert("添加失败");
                    }
                }
            })
        })
        //用户管理
        //点击编辑按钮弹出模态框。
        //委派其父元素对其绑定单击事件，因为该事件是页面加载后绑定，
        $(document).on('click','.update_user_btn',function (){
            // console.log(this);
            //1、清除表单数据（表单完整重置（表单的数据，表单的样式））
            reset_form("#update_user_model form");
            // 2、查出员工信息，并显示
            let id = $(this).attr("edit-id");
            // alert(id);
            getUser(id);
            $("#update_user_model").modal({
                backdrop:'static',
            })
        })
        //清空表单样式及内容
        function reset_form(ele){
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }
        // 2、查出员工信息，并显示
        function getUser(userid){
            $.ajax({
                url:"${APP_PATH}/user/"+userid,
                type:"get",
                success:function (result){
                    // console.log(result);
                    let user = result.extend.user;
                    $("#update_user_id").attr("value",user.userid);
                    $("#update_user_name").val(user.username);
                    $("#update_user_password").val(user.userpassword);
                    $("#update_user_gender input[name=gender]").val(user.gender).attr("disabled","disabled");
                    $("#update_user_phone").val(user.phone);
                    $("#update_user_email").val(user.email);
                    $("#update_user_userstate").val(user.userstate);
                    //给提交按钮绑定该员工的id,之后根据id来修改
                    $("#user_update").attr("update_user_id",user.userid);
                }
            })
        }
        //点击提交按钮，进行员工数据的更新
        $("#user_update").on('click',function (){
            let serialize = $("#update_user_model form").serialize();
            let component = decodeURIComponent(serialize);
            alert(component);
            // +$("#update_user_id").val();
            // 可以不传id
            //2、发送AJAX请求修改信息
            $.ajax({
                url:"${APP_PATH}/user",
                type:"put",
                data:component,
                success:function (result){
                    if(result.code == 100){
                        //关闭更新模态框
                        alert("修改用户成功");
                        user();
                        $("#update_user_model").modal('hide');

                    }
                }
            })
        })

        //添加新用户
        $("#user_add").on('click',function (){
            let serialize = $(this).parent().serialize();
            let component = decodeURIComponent(serialize);
            alert(component);
            $.ajax({
                url:"${APP_PATH}/useradd",
                type:"post",
                data:component,
                success:function (result){
                    console.log(result)
                    if(result.code == 100){
                        alert("添加成功");
                        user();
                    }else {
                        alert("添加失败");
                    }
                }
            })
        })

        //给删除按钮绑定点击事件   单个删除    用户删除
        $(document).on('click',".delete_user_btn",function (){

            //1、清除提示框信息
            $("#delete_admin_info").empty();
            // reset_form("#update_emp_model form");

            // 2、查出员工信息，并显示
            let id = $(this).attr("del-id");
            let username = $(this).parent().parent().find("td").eq(1).text();
            // alert(username);
            $("#delete_admin_info").append(username);
            //3、弹出提示框 提示是否删除
            $("#delete_user_model").modal({
                backdrop:'static',
            })
            alert(id);
            //4点击删除后，发送发AJAX请求删除
            $("#is_delete_user").on('click',function (){
                $.ajax({
                    url:"${APP_PATH}/user/"+id,
                    type:"delete",
                    success:function (result){
                        // console.log(result);
                        if(result.code == 100){
                            //关闭更新模态框
                            $("#delete_user_model").modal('hide');
                            //取消单击事件
                            $(this).off('click');
                            user();
                        }
                    }
                })

            })


        })


        user();
        function user(){
            $.ajax({
                url:"${APP_PATH}/userall",
                type:"get",
                success:function (result){
                    // console.log(result);
                    //在每次发送AJAX请求前，把上一次的数据情况
                    $("#admin_info .ul_first tbody").empty();

                    //1、解析并显示员工数据
                    build_users_table(result);
                }
            })
        }
        //1、显示员工信息表
        function build_users_table(result){
            var users = result.extend.users;
            // console.log(result);
            $.each(users,function (index,item){
                let userid = $("<td></td>").append(item.userid);
                let username = $("<td></td>").append(item.username);
                let userpassword = $("<td></td>").append(item.userpassword);
                let gender = $("<td></td>").append(item.gender);
                let phone = $("<td></td>").append(item.phone);
                let email = $("<td></td>").append(item.email);
                let userstate = $("<td></td>").append(item.userstate);
                // console.log(userstate.text());
                if (userstate.text() == 0){
                    userstate.html("");
                    userstate.html("普通用户");
                }else {
                    userstate.html("");
                    userstate.html("VIP用户");
                }
                let editBtn = $("<button></button>").attr("type","button").addClass("btn btn-success btn-sm update_user_btn").append($("<span></span>").attr("aria-hidden","true").addClass("glyphicon glyphicon-pencil")).append("编辑")
                //为editBtn添加一个自定义属性，来保存当前员工的id
                editBtn.attr("edit-id",item.userid);
                let delBtn = $("<button></button>").attr("type","button").addClass("btn btn-danger btn-sm delete_user_btn").append($("<span></span>").attr("aria-hidden","true").addClass("glyphicon glyphicon-remove-sign")).append("删除")
                //为delBtn添加当前员工id
                delBtn.attr("del-id",item.userid);
                let option = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                $("<tr/>").append(userid).append(username).append(userpassword).append(gender).append(phone).append(email).append(userstate).append(option).appendTo("#admin_info .ul_first tbody");
            })
        }

        //退出功能
        $("#exit").click(function (){
            $.ajax({
                url:"${APP_PATH}/login",
                type:'get',
                success:function (result){
                    // alert(1111);
                    // console.log(result);
                    //由于ajax发送的url到控制层不会进行页面的跳转，因为当请求成功以后，请求依然会回success,所以可以在此再写一遍url进行跳转
                    window.location.href="${APP_PATH}/login";

                }
            })
        })
    })
</script>

<script>
</script>
</html>
